<template>
	<div class="turnTable">
		<div class="lucky-wheel">
			<div class="lucky-title">
				<div class="user"></div>
			</div>
			<div class="wheel-main">
				<div class="wheel-pointer-box">
					<div class="wheel-pointer" @click="rotate_handle()" :style="{transition:rotate_transition_pointer}"></div>
				</div>
				<div class="wheel-bg">
					<div class="prize-list" :style="{transform:rotate_angle,transition:rotate_transition}">
						<div class="prize-item" v-for="(item,index) in prize_list" :key="item.id">
							<!--  <div class="prize-pic">
                                <img :src="item.img">
                            </div> -->
							<div class="prize-type">
								{{item.name}}
							</div>
						</div>
					</div>
				</div>
				<div class="wheel-light" :class="{'light1': flag == true, 'light2': flag == false}">
					<img src="../images/caidai.png" class="caidai" alt=""> </div>
			</div>
			<!-- <div class="button">
				<div class="toRule btn" @click="toast_control=true;toast_rule=true">活动规则</div>
				<div class="toMyPrize btn" @click="toast_control=true;toast_noPrize=true">我的地址</div>
			</div> -->
		</div>
		<div class="toast-mask" v-show="toast_control">
			<!-- 规则 -->
			<div class="toast rule" v-show="toast_rule">
				<div class="toast-container">
					<div class="close" @click="toast_control=false;toast_rule=false"></div>
					<div class="toast-content">

					</div>
				</div>
			</div>
			<!-- 我的奖品列表 -->
			<div class="toast prizeList" v-show="toast_noPrize">
				<div class="toast-container">
					<div class="close" @click="toast_control=false;toast_noPrize=false;phone_number=false"></div>
					<div class="toast-content">
						<h3>亲爱的用户您好：</h3>
						<h3 class="contnet">
							请您输入准确的姓名、电话、地址，方便我们的工作人员为您邮寄礼品，谢谢！
						</h3>
						<form @submit.prevent="submit" method="post">
							<h3>
								<label>姓名</label>
								<input type="text" value="" placeholder="请输入您的姓名" v-model="form_name" />
							</h3>
							<h3>
								<label>电话</label>
								<input type="text" value="" placeholder="请输入您的电话" v-model="form_phone" />
							</h3>
							<h3>
								<label>地址</label>
								<input type="text" value="" placeholder="请输入您的地址" v-model="form_adress" />
							</h3>
							<h3><button class="button" @click="toast_noPrize=false" type="submit">提交</button></h3>

						</form>
						<ul></ul>
					</div>
				</div>
			</div>
			<!-- 奖品 -->
			<div class="toast prize" v-show="toast_prize">
				<div class="toast-container">
					<div class="close" @click="toast_control=false;toast_prize=false"></div>
					<div class="toast-content">
						<div class="congratu" v-show="index!=5">恭喜您</div>
						<div class="title" v-show="index!=5">获得{{jp}}!</div>
						<!-- <img src="../images/home/50jinbi.png" alt=""> -->
						<p class="title">{{prizeMessage}}</p>


						<div class="button" @click="sure(index)" v-show="index==0||index==4">填写收货人信息</div>
					</div>
				</div>
			</div>
			<!-- 是否有抽奖权限 -->
			<div class="toast prize" v-show="isclick_flag">
				<div class="toast-container">
					<div class="close" @click=";toast_control=false;isclick_flag=false"></div>

					<div class="toast-content">
						<div class="title">{{message}}</div>
						<p></p>

					</div>
				</div>
			</div>
			<!-- 提示输入完整地址 -->
			<div class="toast wanzheng" v-show="is_wanzheng">
				<div class="toast-container">
					<div class="close" @click="is_wanzheng=false"></div>

					<div class="toast-content">


					</div>
				</div>
			</div>
			<!-- 提交地址后提示 -->
			<div class="toast submit_success" v-show="submit_success">
				<div class="toast-container">
					<div class="close" @click="toast_control=false;submit_success=false"></div>

					<div class="toast-content">


					</div>
				</div>
			</div>
			<!-- 提示请输入正确的电话号码-->
			<div class="toast phone_number" v-show="phone_number">
				<div class="toast-container">
					<div class="close" @click="phone_number=false"></div>

					<div class="toast-content">


					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import $ from 'jquery';
	import qs from 'qs';
	export default {
		data() {
			return {
				flag: false, // 跑马灯
				lottery_ticket: 0, //抽奖次数
				toast_control: false, //抽奖结果弹出框控制器
				toast_rule: false, // 规则弹框
				toast_prize: false, // 中奖弹框
				toast_noPrize: false,
				hasPrize: false, //是否中奖
				toast_form: false, //表单弹框
				start_rotating_degree: 0, //初始旋转角度
				rotate_angle: 0, //将要旋转的角度
				start_rotating_degree_pointer: 0, //指针初始旋转角度
				rotate_angle_pointer: 0, //指针将要旋转的度数
				rotate_transition: "transform 6s ease-in-out", //初始化选中的过度属性控制
				rotate_transition_pointer: "transform 12s ease-in-out", //初始化指针过度属性控制
				click_flag: true, //是否可以旋转抽奖
				prize_list: [], // 转盘列表
				code: '', //请求返回是否可以抽奖的值（0：message=返回中奖信息;1：message=活动已经结束;3：message=今天次数已用完,请明天再来;4:message=积分不足）
				isclick_flag: false,
				message: '',
				prizeMessage: '',
				jp: '', //所获奖项
				form_name: '',
				form_phone: '',
				form_adress: '',
				is_wanzheng: false, //表单是否填写完整,
				index: '',
				pkid: '',
				submit_success: false,
				phone_number: false
			};
		},
		created() {
			setInterval(() => {
				this.blink();
			}, 600);
		},
		mounted() {
			var href = window.location.href;
			this.pkid = href.split("pkId=")[1].split("#")[0];
			console.log(this.pkid)
			this.postPrizeData()
		},
		methods: {
			// 时间戳处理
			timestampToTime(time) {
				var date = new Date(time * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear();
				var M =
					date.getMonth() + 1 >= 10 ?
					date.getMonth() + 1 :
					"0" + (date.getMonth() + 1);
				var D = date.getDate() >= 10 ? date.getDate() : "0" + date.getDate();
				var h = date.getHours() >= 10 ? date.getHours() : "0" + date.getHours();
				var m =
					date.getMinutes() >= 10 ? date.getMinutes() : "0" + date.getMinutes();
				var s =
					date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds();
				return Y + "-" + M + "-" + D + "  " + h + ":" + m + ":" + s;
			},
			//此方法为处理奖品数
			rotate_handle() {
				console.log(this.click_flag)
				if (!this.click_flag) return;
				var that = this
				/* this.axios.post('/api/api/hd/choujiang/start',
					qs.stringify({
						pkId: that.pkid
					})).
				then((res) => {
					var data = res.data
					that.code = data.code
					console.log(res)
					that.message = data.message
					if (that.code == 0) {
						that.jp = data.data.jp
						that.index = that.getIndex()
						that.rotating(that.index, 50)
						//	this.postStartData()
						that.code = 3
					} else if (that.code == 1) {
						that.toast_control = true;
						that.isclick_flag = true;
						that.message = "活动已结束"
					} else if (that.code == 3) {
						that.toast_control = true;
						that.isclick_flag = true;
						that.message = "今天次数已用完,请明天再来"
					} else {
						that.toast_control = true;
						that.isclick_flag = true;
						that.message = "您的积分不足"
					}
				}).catch((error) => {
					console.log(error)
				}) */
				$.ajax({
					url: '/api/hd/choujiang/start', //url路径
					type: 'POST', //GET
					async: false, //或false,是否异步
					data: { //参数
						
						pkId: that.pkid
						
					},
					timeout: 5000, //超时时间
					dataType: 'json', //返回的数据格式：
					beforeSend: function(xhr) {},
					success: function(data, textStatus, jqXHR) {
						
						that.code = data.code
						console.log(data)
						that.message = data.message
						if (that.code == 0) {
							that.jp = data.data.jp
							that.index = that.getIndex()
							that.rotating(that.index, 50)
							//	this.postStartData()
							that.code = 3
						} else if (that.code == 1) {
							that.toast_control = true;
							that.isclick_flag = true;
							that.message = "活动已结束"
						} else if (that.code == 3) {
							that.toast_control = true;
							that.isclick_flag = true;
							that.message = "今天次数已用完,请明天再来"
						} else {
							that.toast_control = true;
							that.isclick_flag = true;
							that.message = "您的积分不足"
						}
						
					},
					error: function(xhr, textStatus) {
						console.log('小程序cookie获取失败---->' + textStatus);
					},
					complete: function() {}
				})

			},
			rotating(index, prize_coin) {
				console.log("111" + this.click_flag)
				if (!this.click_flag) return;
				var type = 0; // 默认为 0  转盘转动 1 箭头和转盘都转动(暂且遗留)
				var during_time = 5; // 默认为1s
				//var random = Math.floor(Math.random() * 5);
				var result_index = index; // 最终要旋转到哪一块，对应prize_list的下标
				var result_angle = [330, 270, 210, 150, 90, 30]; //最终会旋转到下标的位置所需要的度数
				var rand_circle = 6; // 附加多转几圈，2-3
				this.click_flag = false; // 旋转结束前，不允许再次触发
				if (type == 0) {
					// 转动盘子
					var rotate_angle =
						this.start_rotating_degree +
						rand_circle * 360 +
						result_angle[result_index] -
						this.start_rotating_degree % 360;
					console.log(rotate_angle)
					this.start_rotating_degree = rotate_angle;
					this.rotate_angle = "rotate(" + rotate_angle + "deg)";
					// 转动指针
					// this.rotate_angle_pointer = "rotate("+this.start_rotating_degree_pointer + 360*rand_circle+"deg)";
					// this.start_rotating_degree_pointer =360*rand_circle;
					var that = this;
					// 旋转结束后，允许再次触发
					setTimeout(function() {
						that.click_flag = true;
						that.game_over(index, prize_coin);
					}, during_time * 1000 + 1500); // 延时，保证转盘转完

				} else {
					//
				}
			},
			game_over(index, prize_coin) {

				this.toast_control = true;
				this.toast_prize = true;
				if (index == 0 || index == 4) {
					this.prizeMessage = ""
				} else if (index == 5) {
					this.prizeMessage = "谢谢参与！"
				} else {
					this.prizeMessage = ""
				}
			},
			sure(index) {
				if (index == 0 || index == 4) {
					this.toast_prize = false
					this.toast_control = true
					this.toast_noPrize = true
				} else {
					this.toast_prize = false
					this.toast_control = false
				}
			},
			blink() {
				this.flag = !this.flag;
			},
			/* 	postStartData() {
					var that = this
					this.axios.post('/api/api/hd/choujiang/start',
						qs.stringify({
							pkId: '9d4314a6-4b5f-4bda-818c-c39c4f66fd7a'
						})).
					then((res) => {
						var data = res.data
						that.code = data.code
						that.message = data.message
						if (that.code == 0) {
							that.jp = data.data.jp

						}
						console.log(data);

					}).catch((error) => {
						console.log(error)
					})
				}, */
			postPrizeData() {
				var that = this
				this.axios.post('/api/hd/choujiang/init',
					qs.stringify({
						pkId: that.pkid
					})).
				then((res) => {
					var data = res.data
					that.prize_list = data.data.list
					console.log(res)
				}).catch((error) => {
					console.log(error)
				})
			},
			getIndex() {
				for (var i = 0; i < this.prize_list.length; i++) {
					if (this.prize_list[i].name == this.jp) {
						return i
					}
				}
			},
			submit: function() {
				var testmobile = /^1[34578]\d{9}$/
				var testphone = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
				if (this.form_name == '' || this.form_phone == '' || this.form_adress == '') {
					this.toast_control = true
					this.toast_noPrize = true
					this.is_wanzheng = true
				} else {
					if ((testphone.test(this.form_phone)) || (testmobile.test(this.form_phone))) {

						this.toast_control = true
						this.submit_success = true
						this.axios.post('/api/hd/choujiang/add', qs.stringify({
								userId: this.pkid,
								userName: this.form_name,
								mobile: this.form_phone,
								address: this.form_adress
							}))
							.then(function(response) {
								console.log(response);
							})
							.catch(function(error) {
								console.log(error);
							});
					} else {
						this.toast_control = true
						this.toast_noPrize = true
						this.phone_number = true
						console.log(this.form_phone)
					}

				}
			} //提交表单
		}
	};
</script>
<style lang="less" scoped>
	@import "./luckywheel.less";
</style>
